<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .el-cascader-panel .el-radio {
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: -10px;
    }
    .el-cascader-panel .el-radio__input {
        visibility: hidden;
    }
    .el-cascader-panel .el-cascader-node__postfix {
        top: 10px;
    }
</style>

<body>
    <div id="app" class="" v-cloak>
        <el-dialog title="设置钟点房夜间数量" :visible.sync="dialogFormVisible" width="25%" @closed="CL()" v-if="miid == 1">
            <div class="bor-e6 pa-12-16">注意：修改后，历史统计数据不受影响</div>
            <el-form :model="form" label-width="135px" size="small" :rules="rules" ref="ruleForm" class="pl-15 mt-23">
                <el-row :gutter="20"> 
                    <el-form-item label="钟点房间夜量基数" prop="night">
                        <el-input v-model="form.night" autocomplete="off" style="width: 95%;"></el-input>
                        <span class="tx-99">请输入0 ~ 10之间的数字</span>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small" class="tx-14">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" size="small" class="tx-14">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增钟点房" :visible.sync="dialogFormVisible" width="25%" @closed="CL()" v-if="miid == 2">
            <el-form :model="form" label-width="100px" size="small" :rules="rules" ref="ruleForm">
                <el-row :gutter="20">
                    <el-form-item label="房间名称">
                        <el-select v-model="form.roomTypeId" placeholder="请选择房间" size="small" style="width: 100%;">
                            <el-option label="23" :value="0"></el-option>
                            <el-option label="12" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入住时长">
                        <div>
                            <input type="text" v-model="form.hour" autocomplete="off" placeholder="请输入"
                                class="el-input__inner el-input__shadow">
                            <span class="el-input__suffix mt-5 mr-10">
                                <span class="el-input__suffix-inner">
                                    <span class="tx-33">小时</span>
                                </span><i class="el-input__icon el-input__validateIcon el-icon-circle-close"></i>
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="价格">
                        <div>
                            <input type="text" v-model="form.Price" autocomplete="off" placeholder="请输入"
                                class="el-input__inner el-input__shadow pl-22">
                            <span class="el-input__prefix">
                                <span class="el-input__icon iconfont text-16-primary tx-33 tx-w">￥</span>
                            </span>
                            <span class="el-input__suffix mt-5 mr-10">
                                <span class="el-input__suffix-inner">
                                    <span class="tx-33 ">元</span>
                                </span><i class="el-input__icon el-input__validateIcon el-icon-circle-close"></i>
                            </span>
                        </div>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small" class="tx-14">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" size="small" class="tx-14">完成</el-button>
            </div>
        </el-dialog>
    </div>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                dialogFormVisible: false,
                miid: Pms.getParameter("miid"),
                form: {
                    id: Pms.getParameter("id"),
                    night: "0.5",
                    hour: "",
                    Price: "",
                    roomTypeId: "",
                    // status: 1
                },
                rules: {
                    night: [
                        { required: true, message: '请填夜间基数', trigger: 'blur' },
                    ],
                },
            },
            mounted() {
                this.dialogFormVisible = true
            },
            created() {
            },
            methods: {
                submitForm(formName) {
                    if (this.form.roomTypeId == ''|| this.form.hour == ''|| this.form.Price == '' ) {
                        var messages = '';
                        if(this.form.roomTypeId == ''){messages='请选择房间名称'};
                        if(this.form.hour == ''){ messages='请填写入住时长' };
                        if(this.form.Price == ''){ messages='请填写价格' };
                        this.$message({
                            message: messages,
                            type: 'warning'
                        });
                    }
                    // this.$refs[formName].validate((valid) => {
                    //     if (valid) {
                    //         this.startLoading("加载中", { background: "rgba(0, 0, 0, 0)", target: document.getElementsByClassName("el-dialog")[0] }, this)
                    //         this.POST({ url: top.Config.curUrl + "/bst/bstHouRoomConfig", map: this.form }).then((res) => {
                    //             if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                    //                 setTimeout(() => {
                    //                     this.Refresh("vm.getList()");
                    //                     this.closeLoading();
                    //                     this.dialogFormVisible = false;
                    //                 }, 1000);
                    //             } else { //如果返回码是200则登录成功
                    //                 this.msgError(res.retmsg)
                    //             }
                    //         })
                    //     }
                    // });
                },
            }
        })
    </script>

</body>

</html>